<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>花色号维护</title>
    <link rel="stylesheet" href="../static/layui-2.3.0/css/layui.css">

    <link href="../static/bootstrap-4.1.1/bootstrap.min.css"
          rel="stylesheet">
    <style type="text/css">
        #form-cus-query .layui-form-label {
            width: auto;
            padding-left: 5px;
            padding-right: 5px;
        }
    </style>
</head>

<body>

<div style="padding: 5px 0 20px 3px;">
		<span class="layui-breadcrumb" lay-separator="-"> <a href="#">基础信息管理</a>
			<a><cite>客户信息维护</cite></a>
		</span>
</div>

<form class="layui-form" id="form-cus-query">
    <div class="layui-form-item">
        <div class="layui-inline">

            <label class="layui-form-label">客户状态</label>
            <div class="layui-input-inline" style="width: 100px;">
                <!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 -->
                <select name="cus_status" lay-verify="required" lay-filter="select-cus-query-cus-status">
                    <option value="">全部</option>
                    <option value="00">未确定</option>
                    <option value="22">确定</option>
                    <option value="55">启用</option>
                    <option value="77">禁用</option>
                    <option value="99">逻辑删除</option>
                </select>
            </div>

            <label class="layui-form-label">编号</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="number" name="cus_id" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="cus_name" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">说明</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="cus_remark" autocomplete="off"
                       class="layui-input">
            </div>

            <button class="layui-btn" id="bn-cus-query"><i class="layui-icon layui-icon-search"></i> 查询</button>
        </div>
    </div>
</form>


<div class="layui-btn-container">
    <button type="button" class="layui-btn" id="bn-cus-add-multi"><i class="layui-icon">&#xe608;</i> 新增</button>
    <button type="button" class="layui-btn" id="bn-cus-cfm-multi"><i class="layui-icon layui-icon-ok-circle"></i> 确定
    </button>
    <button type="button" class="layui-btn" id="bn-cus-use-multi"><i class="layui-icon layui-icon-auz"></i> 启用</button>
    <button type="button" class="layui-btn" id="bn-cus-unuse-multi"><i class="layui-icon layui-icon-fonts-del"></i> 禁用
    </button>
    <button class="layui-btn layui-btn-danger" id="bn-cus-del-multi"><i class="layui-icon layui-icon-delete"></i> 删除
    </button>
</div>


<script type="text/html" id="barDemo">
    <!--  laytpl 语法， d指数据，在这里指当前行数据 -->
    {{#  if(d.cus_status == '00' ){ }}
    <a class="layui-btn layui-btn-xs" lay-event="cus_edit"><i class="layui-icon">&#xe608;</i> 编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="cus_cfm"><i class="layui-icon layui-icon-ok-circle"></i> 确定</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cus_del"><i class="layui-icon layui-icon-delete"></i>
        删除</a>
    {{#  }else if(d.cus_status == '22' || d.cus_status == '77' ){  }}
    <a class="layui-btn layui-btn-xs" lay-event="cus_use"><i class="layui-icon layui-icon-auz"></i> 启用</a>
    {{#  }else if(d.cus_status == '55' ){  }}
    <a class="layui-btn layui-btn-xs" lay-event="cus_unuse"><i class="layui-icon layui-icon-fonts-del"></i> 禁用</a>
    {{#  }else if(d.cus_status == '99' ){  }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cus_del"><i class="layui-icon layui-icon-delete"></i>
        删除</a>
    {{#  }  }}
</script>


<table id="info-customer-table" lay-filter="custable"></table>


<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/bootstrap-4.1.1/bootstrap.min.js"></script>
<script src="../static/layui-2.3.0/layui.js"></script>
<script src="../static/js/sweetalert-2.1.0.min.js"></script>
<script src="../static/js/common.js"></script>


<script type="text/javascript">

    layui.use(['element', 'table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        //第一个实例
        var cusTable = table.render({
            elem: '#info-customer-table'
            , url: 'customer' //数据接口
            , page: true //开启分页
            , limits: [5, 10, 20, 30]
            , limit: 5
            , cols: [[ //表头
                {
                    type: 'checkbox'
                }
                ,
                {
                    field: 'cus_id',
                    title: '客户信息编号',
                    sort: true,
                    event: 'setSign',
                    style: 'cursor: pointer;'
                }
                , {
                    field: 'cus_name',
                    title: '客户信息名称',
                    edit: 'text'
                }
                , {
                    field: 'cus_remark',
                    title: '客户信息说明',
                    edit: 'text'
                }
                , {
                    field: 'cus_status',
                    title: '客户信息状态',
                    //edit : 'text',
                    //00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除
                    templet: function (d) {
                        if (d.cus_status == '00') {
                            return '未确定';
                        }
                        if (d.cus_status == '22') {
                            return '确定';
                        }
                        if (d.cus_status == '55') {
                            return '启用';
                        }
                        if (d.cus_status == '77') {
                            return '禁用';
                        }
                        if (d.cus_status == '99') {
                            return '逻辑删除';
                        }

                    }
                }
                , {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo'
                }

            ]]
        });

        //监听下拉选择框被选中时触发<select lay-filter="select-cus-query-cus-status"></select>
        form.on('select(select-cus-query-cus-status)', function (data) {
            $("#bn-cus-query").click();
        });


        //批量修改状态
        $("#bn-cus-cfm-multi").click(function () {//确定
            changeMultiCusStatus('您确实要确定选择的客户信息吗？', '客户信息一旦被确定，将不能再被编辑！', '22', "info-customer-table", cusTable);
        });
        $("#bn-cus-use-multi").click(function () {//启用
            changeMultiCusStatus('您确实要启用选择的客户信息吗？', '！', '55', "info-customer-table", cusTable);
        });
        $("#bn-cus-unuse-multi").click(function () {//禁用
            changeMultiCusStatus('您确实要禁用选择的客户信息吗？', '客户信息一旦被禁用，将不能被使用！', '77', "info-customer-table", cusTable);
        });

        // {
        //     title:"标题";
        //     text:"提示信息";
        //     status:"要修改的状态";
        //     tableID:"数据表格id";
        //     Table:"";
        // }

        //批量修改封装方法
        function changeMultiCusStatus(title,text,status,tableID,Table){
            var checkStatus = table.checkStatus(tableID); //基础参数id对应的值
            console.log(checkStatus.data) //获取选中行的数据(数组)
            //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            //console.log(checkStatus.isAll ) //表格是否全选
            if (checkStatus.data.length == 0) {
                swal({
                    text: '您没有选择任何数据！',
                    icon: "error",
                    buttons: false,
                    timer: 1500
                });
                return;
            }
            var arr = [];
            $.each(checkStatus.data, function () {
                arr.push(this.cus_id);
            });


            //优化1.1
            opr.ajaxWithConfirm({

                title:title,
                text:text,
                url:'customer/status/'+status,
                data:JSON.stringify(arr),
                contentType:"application/json;charset=UTF-8",
                method:'put',
                layer:layer,
                layuiTableIns:cusTable
            });

        }


        //批量删除
        $("#bn-cus-del-multi").click(function () {
            var checkStatus = table.checkStatus('info-customer-table'); //test即为基础参数id对应的值
            console.log(checkStatus.data); //获取选中行的数据
            //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            //console.log(checkStatus.isAll ) //表格是否全选
            var arr = [];
            $.each(checkStatus.data, function () {
                arr.push(this.cus_id);
            });


            //优化1.1
            opr.ajaxWithConfirm({
                url:'customer',
                data:JSON.stringify(arr),
                contentType:"application/json;charset=UTF-8",
                method:'delete',
                dataType:'json',
                title: "您确实要删除选择的数据吗?",
                text: "数据一旦删除将无法恢复!",
                layer: layer,
                layuiTableIns: cusTable,
            });


            //优化前
            // layer.confirm('真的删除行么', function (index) {
            //     //向服务端发送删除指令
            //     $.ajax({
            //         url: 'customer',
            //         data: JSON.stringify(arr),
            //         contentType: 'application/json;charset=UTF-8',
            //         method: 'delete',
            //         dataType: 'json'
            //     }).done(function (result) {
            //         if (result.success) {
            //             layer.msg(result.message);
            //             //重新刷新数据
            //             cusTable.reload();
            //         } else {
            //             layer.msg(result.message);
            //         }
            //
            //     }).fail(function (xhr) {
            //         layer.msg("接口异常");
            //     });
            // });
            // //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            // layer.close(index);



        });


        //条件查询
        $("#bn-cus-query").click(function () {
            //将表单对象封装成json对象
            var arr = $("#form-cus-query").serializeArray();
            var params = {};
            /*
            {
                co_id:8888,
                co_name:'mmmm'
            }
             */
            for (var i = 0; i < arr.length; i++) {
                params[arr[i].name] = arr[i].value;
            }
            //这里以搜索为例
            cusTable.reload({
                where: params
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            //重设按钮
            showBns();
            return false;
        });

        //添加弹框
        var layerIdx;
        $("#bn-cus-add-multi").click(function () {
            //formTest 即 class="layui-form" 所在元素对应的 lay-filter="" 对应的值
            //$("#cus_id").show();
            $("#bn-doadd-customer").show();
            $("#bn-doupdate-customer").hide();

            form.val("form-customer", {
                "cus_id": "",
                "cus_name": "",
                "cus_remark": "",
                "cus_status": ""
            });
            layerIdx = layer.open({
                type: 1,
                title: '新增客户信息',
                area: ['700px', '600px'],
                content: $('#div-customer') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        });
        form.on('submit(bn-doadd-customer)', function (data) {
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            //优化1.1
            opr.ajax({
                url: "customer",
                data: data.field,
                method: "post",
                dataType: 'json',
                layer: layer,
                layuiTableIns: cusTable,
                responseOkHandler: function (result) {
                    layer.close(layerIdx);
                    return true;//返回true,继续默认后续行为
                }
            });
            return false;


            //优化前
            // $.ajax({
            //     url : 'customer',
            //     data : data.field,
            //     method : 'post',
            //     dataType : 'json'
            // }).done(function(result) {
            //     if (result.success) {
            //         layer.alert(result.message);
            //         cusTable.reload(); //重载表格
            //         layer.close(layerIdx);
            //     } else {
            //         layer.alert(result.message);
            //     }
            // }).fail(function(xhr) {
            //     layer.alert("接口异常");
            // });
            // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //显示按钮是否可用
        function showBns() {
            var _cus_status = $("#form-cus-query select[name=cus_status]").val();
            if (_cus_status == '') {
                //add(添加)--cfm(确定)--use(启用)--unuse(禁用)--del(删除)
                <!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 -->//////prop("disabled",true).addClass("layui-btn-disabled")先设置不可点击(true)+禁用样式
                $("#bn-cus-add-multi,#bn-cus-cfm-multi,#bn-cus-use-multi,#bn-cus-unuse-multi,#bn-cus-del-multi").prop("disabled", true).addClass("layui-btn-disabled");
            } else if (_cus_status == '00') {
                $("#bn-cus-add-multi,#bn-cus-cfm-multi,#bn-cus-del-multi").prop("disabled", false).removeClass("layui-btn-disabled");
                $("#bn-cus-use-multi,#bn-cus-unuse-multi").prop("disabled", true).addClass("layui-btn-disabled");
            } else if (_cus_status == '22' || _cus_status == '77') {
                $("#bn-cus-use-multi").prop("disabled", false).removeClass("layui-btn-disabled");
                $("#bn-cus-add-multi,#bn-cus-cfm-multi,#bn-cus-unuse-multi,#bn-cus-del-multi").prop("disabled", true).addClass("layui-btn-disabled");
            } else if (_cus_status == '55') {
                $("#bn-cus-unuse-multi").prop("disabled", false).removeClass("layui-btn-disabled");
                $("#bn-cus-add-multi,#bn-cus-cfm-multi,#bn-cus-use-multi,#bn-cus-del-multi").prop("disabled", true).addClass("layui-btn-disabled");

            }
        }

        showBns();


        //监听工具条
        table.on('tool(custable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'cus_cfm') { //确定

                //优化1.1
                opr.ajaxWithConfirm({
                    title: "您确实要确定该条数据吗?",
                    text: "数据一旦确定将无法编辑!",
                    url:'customer/status/' + data.cus_id+"/22",
                    method:'put',
                    layer:layer,
                    layuiTableIns:cusTable
                });


            } else if (layEvent === 'cus_use') { //启用

                opr.ajaxWithConfirm({
                    title: "您确实要启用该条数据吗?",
                    url:'customer/status/' + data.cus_id+"/55",
                    method:'put',
                    layer:layer,
                    layuiTableIns:cusTable
                });

            } else if (layEvent === 'cus_unuse') { //禁用

                opr.ajaxWithConfirm({
                    title: "您确实要禁用该条数据吗?",
                    url:'customer/status/' + data.cus_id+"/77",
                    method:'put',
                    layer:layer,
                    layuiTableIns:cusTable
                });

            } else if (layEvent === 'cus_del') { //删除

                //优化1.1
                opr.ajaxWithConfirm({
                    title: "您确实要删除该条数据吗?",
                    text: "数据一旦删除将无法恢复!",
                    url:'customer/' + data.cus_id,
                    method:'delete',
                    layer:layer,
                    layuiTableIns:cusTable
                });

                //优化前
                // layer.confirm('真的删除行么', function (index) {
                //     //向服务端发送删除指令
                //     $.ajax({
                //         url: 'customer/' + data.cus_id,
                //         method: 'delete',
                //         dataType: 'json'
                //     }).done(function (result) {
                //         if (result.success) {
                //             layer.msg(result.message);
                //             cusTable.reload();
                //         } else {
                //             layer.msg(result.message);
                //         }
                //     }).fail(function (xhr) {
                //         layer.msg("接口异常");
                //     });
                //
                //     //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                //     layer.close(index);
                // });




            } else if (layEvent === 'cus_edit') { //编辑
                $("#bn-doadd-customer").hide();
                $("#bn-doupdate-customer").show();


                //优化1.1
                opr.ajax({
                    url: 'customer/' + data.cus_id,
                    method: 'get',
                    layer: layer,
                    responseOkHandler: function (cus) {
                        //form-cus-upd是表单的lay-filter值
                        form.val("form-customer", cus);

                        layerIdx = layer.open({
                            type: 1,
                            title: '修改客户信息',
                            area: ['800px', '540px'],
                            content: $('#div-customer'),
                            zIndex: 100 //将层次降低，以使sweetalert能够在layer之上
                        });

                    }
                });


                //修改
                form.on('submit(bn-doupdate-customer)', function (data) {

                    //优化1.1
                    opr.ajax({
                        url: 'customer',
                       // data: data.field,
                        data: JSON.stringify(data.field),//处理为json格式
                        contentType: 'application/json;charset=UTF-8',
                        method: 'put',
                        dataType: 'json',
                        layer: layer,
                        layuiTableIns: cusTable,
                        responseOkHandler: function (result) {//关闭当前的模态框（修改必须要加添加）
                            layer.close(layerIdx);
                            return true;//返回true,继续默认后续行为
                        }
                    });
                    return false;


                    //优化前
                    // $.ajax({
                    //     url : 'customer',
                    //     data : data.field,
                    //     method : 'put',
                    //     dataType : 'json'
                    // }).done(function(result) {
                    //     if (result.success) {
                    //         layer.alert(result.message);
                    //         cusTable.reload(); //重载表格
                    //         layer.close(layerIdx);
                    //     } else {
                    //         layer.alert(result.message);
                    //     }
                    // }).fail(function(xhr) {
                    //     layer.alert("接口异常");
                    // });
                    // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

                });
            }
        });


    });

</script>


<!--弹出窗口内容  -->
<div style="padding: 5px;display:none" id="div-customer">
    <form class="layui-form" lay-filter="form-customer">
        <div class="layui-form-item" id="cus_id" style="display: none">
            <label class="layui-form-label">客户ID</label>
            <div class="layui-input-block">
                <input type="hidden" name="cus_id"
                       placeholder="请输入客户ID" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">客户名字</label>
            <div class="layui-input-block">
                <input type="text" name="cus_name" required lay-verify="required"
                       placeholder="请输入客户名字" autocomplete="off" class="layui-input">
            </div>
            <!-- <div class="layui-form-mid layui-word-aux">花色名字验证</div> -->
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">客户描述</label>
            <div class="layui-input-block">
                <input type="text" name="cus_remark" required lay-verify="required"
                       placeholder="请输入客户描述" autocomplete="off" class="layui-input">
            </div>
            <!-- <div class="layui-form-mid layui-word-aux">花色描述</div> -->
        </div>

        <%--  <div class="layui-form-item">
              <label class="layui-form-label">客户状态</label>
              <div class="layui-input-block">
                  <!-- 00-未确定 22-确定 55-启用 77-禁用 99-逻辑删除 -->
                  <select name="cus_status" required lay-verify="required">
                      <option value="">状态</option>
                      <option value="00">未确定</option>
                      <option value="22">确定</option>
                      <option value="55">启用</option>
                      <option value="77">禁用</option>
                      <option value="99">逻辑删除</option>
                  </select>
              </div>
              <!-- <div class="layui-form-mid layui-word-aux">花色状态</div> -->
          </div>--%>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="bn-doadd-customer" lay-submit lay-filter="bn-doadd-customer">提交</button>
                <button class="layui-btn" id="bn-doupdate-customer" lay-submit lay-filter="bn-doupdate-customer">提交
                </button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</body>
</html>